<template>
  <div class="todo-container">
    <h2 class="text-2xl font-bold mb-6">待办事项列表</h2>
    
    <!-- 添加任务表单 -->
    <div class="mb-6">
      <el-input 
        v-model="newTodo" 
        placeholder="请输入新任务..." 
        @keyup.enter="addTodo"
      >
        <template #append>
          <el-button @click="addTodo" type="primary">添加</el-button>
        </template>
      </el-input>
    </div>

    <!-- 任务列表 -->
    <el-card v-if="todos.length > 0" shadow="never" class="mb-4">
      <el-table :data="todos" style="width: 100%" empty-text="暂无任务">
        <el-table-column width="50">
          <template #default="{ row }">
            <el-checkbox v-model="row.completed" @change="toggleTodo(row.id)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="title">
          <template #default="{ row }">
            <span :class="{ 'line-through text-gray-400': row.completed }">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" align="right">
          <template #default="{ row }">
            <el-button type="danger" size="small" @click="deleteTodo(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 空状态 -->
    <el-empty v-else description="暂无任务，请添加新任务"></el-empty>

    <!-- 统计信息 -->
    <div class="mt-4 text-sm text-gray-500">
      已完成 {{ completedCount }} / {{ todos.length }} 项任务
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'TodoList',
  
  setup() {
    const todos = ref([]);
    const newTodo = ref('');
    
    const completedCount = computed(() => {
      return todos.value.filter(todo => todo.completed).length;
    });
    
    // 获取所有任务
    const fetchTodos = async () => {
      try {
        const response = await axios.get('/api/todos');
        todos.value = response.data;
      } catch (error) {
        console.error('获取任务失败:', error);
        ElMessage.error('获取任务失败');
      }
    };
    
    // 添加任务
    const addTodo = async () => {
      if (!newTodo.value.trim()) return;
      
      try {
        const response = await axios.post('/api/todos', {
          title: newTodo.value,
          completed: false
        });
        
        todos.value.push(response.data);
        newTodo.value = '';
        ElMessage.success('添加任务成功');
      } catch (error) {
        console.error('添加任务失败:', error);
        ElMessage.error('添加任务失败');
      }
    };
    
    // 切换任务完成状态
    const toggleTodo = async (id) => {
      const todo = todos.value.find(t => t.id === id);
      if (!todo) return;
      
      try {
        const updatedTodo = { ...todo, completed: !todo.completed };
        await axios.put(`/api/todos/${id}`, updatedTodo);
        
        todo.completed = !todo.completed;
      } catch (error) {
        console.error('更新任务状态失败:', error);
        ElMessage.error('更新任务状态失败');
      }
    };
    
    // 删除任务
    const deleteTodo = async (id) => {
      try {
        await axios.delete(`/api/todos/${id}`);
        todos.value = todos.value.filter(todo => todo.id !== id);
        ElMessage.success('删除任务成功');
      } catch (error) {
        console.error('删除任务失败:', error);
        ElMessage.error('删除任务失败');
      }
    };
    
    // 初始加载数据
    fetchTodos();
    
    return {
      todos,
      newTodo,
      completedCount,
      addTodo,
      toggleTodo,
      deleteTodo
    };
  }
}
</script>

<style scoped>
.todo-container {
  max-width: 800px;
  margin: 0 auto;
}
</style> 